<template>
  <div id="mapContainer" style="width: 100vw; height: 100vh"></div>
  <!-- <div class="compass">
    <button class="left" @click="reverseClick"></button>
    <button
      class="center"
      :ref="arrowRef"
      :style="style"
      @click="recoveryClick"></button>
    <button class="right" @click="forwordClick"></button>
  </div> -->
</template>

<script setup>
import { onMounted, nextTick, ref } from "vue";
import useInitMap from "@/utils/ol/useInitMap";
import numeral from "numeral";

useInitMap({
  target: "mapContainer",
  onLoadEnd: onLoadEnd,
});

let map, view;

let style = ref({});
let rotate = ref(0);
const arrowRef = ref(null);

function onLoadEnd() {
  map = window.map;
  view = map.getView();

  view.on("change:rotation", ev => {
    rotate.value = (ev.target.getRotation() * 180) / Math.PI;
    style.value = {
      transform: `rotate(${rotate.value}deg)`,
    };
  });

}

const reverseClick = () => {
  var center = view.getCenter();
  var rotation = view.getRotation();
  view.animate({
    center: center, //旋转中心点
    duration: 200,
    rotation: rotation - Math.PI / 6,
  });
};
const recoveryClick = () => {
  var center = view.getCenter();
  view.animate({
    center: center,
    duration: 200,
    rotation: 0,
  });
};
const forwordClick = () => {
  var center = view.getCenter();
  var rotation = view.getRotation();
  view.animate({
    center: center,
    duration: 200,
    rotation: rotation + Math.PI / 6,
  });
};
</script>

<style lang="scss" scoped>
.compass {
  position: absolute;
  z-index: 5;
  bottom: 34px;
  right: 7px;
  width: 52px;
  height: 54px;
  background: url(./earth-navi-control-pc4.png) 0% 0% / 266px no-repeat;
  .left {
    position: absolute;
    outline: none;
    border: none;
    background: url(./earth-navi-control-pc4.png) -75px -5px / 266px no-repeat;
    cursor: pointer;
    left: 2px;
    top: 5px;
    z-index: 1;
    width: 15px;
    height: 42px;
    opacity: 1;
    &:hover {
      background: url(./earth-navi-control-pc4.png) -89px -5px / 266px no-repeat;
    }
  }
  .center {
    position: absolute;
    outline: none;
    border: none;
    background: url(./earth-navi-control-pc4.png) -56px -4px / 266px no-repeat;
    cursor: pointer;
    left: 19px;
    top: 4px;
    width: 14px;
    height: 44px;
    transform: rotate(0deg);
    opacity: 1;
    transition: all 0.5s;
  }
  .right {
    position: absolute;
    outline: none;
    border: none;
    background: url(./earth-navi-control-pc4.png) -75px -5px / 266px no-repeat;
    cursor: pointer;
    right: 2px;
    top: 5px;
    z-index: 1;
    width: 15px;
    height: 42px;
    transform: scaleX(-1);
    opacity: 1;
    &:hover {
      background: url(./earth-navi-control-pc4.png) -89px -5px / 266px no-repeat;
    }
  }
}
</style>
